<template>
  <div>
    <div
      id="timeChars"
      ref="timeChars"
      :style="'width:' + width + 'px;height:' + height + 'px'"
    ></div>
  </div>
</template>
<script>
import { init, dispose, extension } from "klinecharts";
import { configs, getTimezone, judgeColor } from "@/assets/js/kLineConfig.js";
export default {
  props: ["echartHeight", "echartWidth"],
  data() {
    return {
      option: {},
      height: null,
      linNumber: 0,
      stokeNumber: 0,
      width: null,
      TimeKlinechart: null,
      dataSpace: 0, // K线数据间距
    };
  },
  created() {
      if (this.echartHeight == undefined && this.echartHeight == null) {
        if ($(window).width() < 1480) {
          this.height = 300;
        } else {
          this.height = 428;
        }
      } else {
        this.height = this.echartHeight;
      }
  },
  mounted() {},
  methods: {
    //  分时线接口
    getTimeLines(data) {
      let len = data.list;
      let detail = data.detail;
      let list = new Array();
      for (let i = 0; i < len.length; i++) {
        const element = len[i];
        list[i] = new Array();
        list[i].timestamp = parseFloat(element.time) * 1000;
        list[i].close = Number(Number(element.price).toFixed(detail.precision));
        if (i == 0)
          list[i].open = Number(Number(detail.close).toFixed(detail.precision));
        else
          list[i].open = Number(
            Number(list[i - 1].close).toFixed(detail.precision)
          );
        list[i].low = Number(detail.low);
        list[i].high = Number(detail.high);
        list[i].volume = Number(element.volume);
        list[i].turnover = Number(element.volume) * Number(element.price);
        list[i].avgPrice = Number(
          Number(element.avgPrice).toFixed(detail.precision)
        );
        // 涨跌额
        list[i].chg = Number(
          Number(element.price - detail.close).toFixed(detail.precision)
        );
        list[i].gain = Number(
          Number((list[i].chg / element.price) * 100).toFixed(2)
        );
      }
      if (this.TimeKlinechart != null) {
        this.TimeKlinechart.applyNewData(list);
      } else this.timeInit(list, detail);
    },
    // 分时线初始化
    timeInit(list, detail) {
      this.$nextTick(function () {
        dispose(document.getElementById("timeChars"));
        this.TimeKlinechart = init(this.$refs.timeChars);
        judgeColor();
        // 设置精度
        this.TimeKlinechart.setPriceVolumePrecision(2, 2);
        // 设置时区
        if (detail.market == "US")
          this.TimeKlinechart.setTimezone("America/Toronto");
        // 筛入数据
        this.TimeKlinechart.applyNewData(list);
        let marketObj = {
          market: detail.market,
          close: detail.close,
          coded: "day",
          securityType: detail.securityType,
        };
        let val = { ...marketObj, ...detail };
        getTimezone(val);
        this.judgeDataSpace(list, detail);
        // 设置K线与右侧坐标轴距离
        let rightSpace = this.setRightSpace(list.length, this.dataSpace);
        this.TimeKlinechart.setOffsetRightSpace(rightSpace);
        // 设置样式配置
        configs.candle.tooltip.labels = [
          this.$t("info.info_echart.57zd4p13gr80"),
          this.$t("info.info_echart.57zd4p13hz40"),
          this.$t("info.info_echart.57zd4p13il80"),
          this.$t("info.info_echart.57zd4p13j5c0"),
          this.$t("info.info_echart.57zd4p13jt00"),
        ];
        this.TimeKlinechart.setStyleOptions(configs);
      });
    },
    // 判断缩放分时图数据间隔与是否禁止缩放
    judgeDataSpace(list, detail) {
      this.TimeKlinechart.setZoomEnabled(false);
      this.TimeKlinechart.setScrollEnabled(false);
      // 判断缩放分时图数据间隔，港股331条，美股391条，沪深241条
      if (list.length < 100) {
        if (detail.market == "HKEX")
          this.dataSpace = Math.floor(((this.echartWidth - 100) / 331) * 10) / 10;
        else if (detail.market == "US")
          this.dataSpace = Math.floor(((this.echartWidth - 100) / 391) * 10) / 10;
        else this.dataSpace = Math.floor(((this.echartWidth - 100) / 241) * 10) / 10;
      } else
        this.dataSpace = Math.floor(((this.echartWidth - 50) / list.length) * 10) / 10;
      this.TimeKlinechart.setDataSpace(this.dataSpace);
      this.TimeKlinechart.resize();
    },
    // 根据数组长度设置分时线距离右侧距离使初始线从左边开始
    setRightSpace(length, dataSpace) {
      let KWidth = length * dataSpace;
      let rightSpace = this.width - KWidth - 100;
      console.log(rightSpace,"距离")
      if (rightSpace <= 0) rightSpace = 0;
      return rightSpace;
    },
  },
  destroyed() {
    if (this.TimeKlinechart != null) {
      dispose(document.getElementById("timeChars"));
    }
  },
  watch: {
    echartWidth: {
      handler(val) {
        if(val != null) {
          console.log(val,"取值")
          this.width = val;
        }
      }
    },
    deep: true
  },
};
</script>
<style lang="less" scoped>
</style>
